"use client"

import { useState, useEffect } from "react"

interface OpeningCGProps {
  onComplete: () => void
}

export function OpeningCG({ onComplete }: OpeningCGProps) {
  const [currentTextIndex, setCurrentTextIndex] = useState(0)
  const [showTitle, setShowTitle] = useState(false)
  const [showFinalTitle, setShowFinalTitle] = useState(false)

  const storyTexts = [
    "晨雾未散的翡翠边境，一支凋零的玫瑰刺破冻土。拾起它的流浪诗人不会知道，这抹嫣红将改写两个王国的命运。",
    "当暮色浸染白蔷薇宫墙的刹那，巡游马车帘幕微扬——你瞥见了传说中从不露面的玫瑰公主。月光亲吻她瓷白的面庞，琥珀色瞳孔里流转着整条银河的光晕。那一刻，你终于相信吟游诗人口中 “美即灾祸” 的箴言。",
    "穿过十二道月光与荆棘，你立于翡翠王城青铜巨门下。守卫的长戟交错成网，其寒光能斩断所有谎言；穿过秘银浇铸的宰相厅廊，黑曜石地面倒映着权谋者贪婪的笑纹；当最后一道晨光刺破谒见厅彩窗时，王座上垂落的绶带浸满暮年帝王的泪水——那是一位父亲为护住掌中玫瑰，亲手锻造的带刺铠甲。",
    "此刻你手中唯余三件武器：献给卫兵的赤诚之心，予宰相的黄金谜题，以及…藏在你第三根肋骨之下，那枚比传国玺更沉重的誓言。",
  ]

  useEffect(() => {
    if (currentTextIndex < storyTexts.length) {
      const timer = setTimeout(() => {
        setCurrentTextIndex((prev) => prev + 1)
      }, 4000) // 每段文字显示4秒
      return () => clearTimeout(timer)
    } else if (!showFinalTitle) {
      const timer = setTimeout(() => {
        setShowFinalTitle(true)
      }, 2000)
      return () => clearTimeout(timer)
    }
  }, [currentTextIndex, showFinalTitle, storyTexts.length])

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowTitle(true)
    }, 1000)
    return () => clearTimeout(timer)
  }, [])

  const handleSkip = () => {
    onComplete()
  }

  const handleContinue = () => {
    if (showFinalTitle) {
      onComplete()
    } else {
      setCurrentTextIndex(storyTexts.length)
      setShowFinalTitle(true)
    }
  }

  return (
    <div className="min-h-screen relative overflow-hidden cursor-pointer" onClick={handleContinue}>
      {/* Background Image */}
      <div className="absolute inset-0">
        <img
          src="/images/player.png"
          alt="Player Character"
          className="w-full h-full object-cover object-center opacity-40"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-black/80" />
      </div>

      {/* Decorative Elements */}
      <div className="absolute inset-0">
        <div className="absolute top-10 left-10 w-32 h-32 border border-red-300/30 rounded-full animate-pulse" />
        <div className="absolute bottom-20 right-20 w-24 h-24 border border-red-300/20 rounded-full animate-pulse delay-1000" />
        <div className="absolute top-1/3 right-1/4 w-16 h-16 border border-red-300/40 rounded-full animate-pulse delay-500" />
      </div>

      {/* Content */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen p-8">
        {/* Title */}
        <div
          className={`mb-12 transition-all duration-2000 ${showTitle ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-10"}`}
        >
          <h1 className="text-6xl md:text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-400 via-pink-300 to-red-500 text-center mb-4 font-serif">
            《玫瑰誓约》
          </h1>
          <div className="w-32 h-1 bg-gradient-to-r from-transparent via-red-400 to-transparent mx-auto" />
        </div>

        {/* Story Text Container */}
        <div className="w-full max-w-4xl min-h-[300px] flex items-center justify-center">
          {currentTextIndex < storyTexts.length && (
            <div className="bg-black/60 backdrop-blur-sm rounded-3xl p-8 border border-red-300/30 shadow-2xl">
              <p className="text-white text-lg md:text-xl leading-relaxed text-center font-light tracking-wide">
                {storyTexts[currentTextIndex]}
              </p>
            </div>
          )}

          {/* Final Title */}
          {showFinalTitle && (
            <div
              className={`transition-all duration-3000 ${showFinalTitle ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
            >
              <div className="text-center">
                <div className="mb-8">
                  <div className="w-24 h-1 bg-gradient-to-r from-transparent via-yellow-400 to-transparent mx-auto mb-6" />
                  <h2 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 via-yellow-400 to-yellow-500 font-serif tracking-wider">
                    "请证明爱意比剑刃锋利"
                  </h2>
                  <div className="w-24 h-1 bg-gradient-to-r from-transparent via-yellow-400 to-transparent mx-auto mt-6" />
                </div>

                <div className="mt-12 animate-bounce">
                  <p className="text-white/80 text-sm">点击任意位置继续</p>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Skip Button */}
        <button
          onClick={(e) => {
            e.stopPropagation()
            handleSkip()
          }}
          className="fixed top-6 right-6 px-4 py-2 bg-black/50 hover:bg-black/70 text-white/80 hover:text-white rounded-full text-sm transition-all duration-300 border border-white/20"
        >
          跳过
        </button>

        {/* Progress Indicator */}
        {currentTextIndex < storyTexts.length && (
          <div className="fixed bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-2">
            {storyTexts.map((_, index) => (
              <div
                key={index}
                className={`w-2 h-2 rounded-full transition-all duration-500 ${
                  index <= currentTextIndex ? "bg-red-400" : "bg-white/30"
                }`}
              />
            ))}
          </div>
        )}
      </div>

      {/* Floating Rose Petals Effect */}
      <div className="absolute inset-0 pointer-events-none">
        {[...Array(6)].map((_, i) => (
          <div
            key={i}
            className="absolute w-2 h-2 bg-red-400/30 rounded-full animate-float"
            style={{
              left: `${Math.random() * 100}%`,
              animationDelay: `${i * 2}s`,
              animationDuration: `${8 + Math.random() * 4}s`,
            }}
          />
        ))}
      </div>
    </div>
  )
}
